<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古籍在线 - 古韵新境</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        ink: '#333333',
                        cinnabar: '#c41e3a',
                        rice: '#f5f2ea',
                        lightink: '#666666',
                        paper: '#f9f6f0',
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif'],
                        sans: ['"Noto Sans SC"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .book-card-hover {
                transition: all 0.4s ease;
            }
            .book-card-hover:hover {
                transform: translateY(-6px);
                box-shadow: 0 12px 20px rgba(0,0,0,0.1);
            }
            .scroll-reveal {
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.6s ease;
            }
            .scroll-reveal.active {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-paper text-ink font-sans">
    <!-- 头部导航 -->
    <header class="fixed top-0 left-0 w-full bg-paper/90 backdrop-blur-sm z-50 shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <!-- Logo -->
            <a href="index.html" class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                    <span class="text-rice font-kai text-xl">典</span>
                </div>
                <span class="text-xl md:text-2xl font-song font-bold ml-2">古籍在线</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="font-song hover:text-cinnabar transition-colors duration-300">首页</a>
                <a href="poems.html" class="font-song hover:text-cinnabar transition-colors duration-300">诗境</a>
                <a href="classics.html" class="font-song text-cinnabar border-b-2 border-cinnabar pb-1">典籍</a>
                <a href="interactive.html" class="font-song hover:text-cinnabar transition-colors duration-300">互动</a>
                <a href="about.html" class="font-song hover:text-cinnabar transition-colors duration-300">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-2 rounded-full hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
                    登录 / 注册
                </button>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-ink text-2xl">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-paper absolute top-full left-0 w-full shadow-lg">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="index.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">首页</a>
                <a href="poems.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">诗境</a>
                <a href="classics.html" class="font-song py-2 border-b border-gray-200 text-cinnabar">典籍</a>
                <a href="interactive.html" class="font-song py-2 border-b border-gray-200 hover:text-cinnabar">互动</a>
                <a href="about.html" class="font-song py-2 hover:text-cinnabar">关于</a>
                <button class="bg-cinnabar text-rice px-5 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                    登录 / 注册
                </button>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="flex flex-col md:flex-row md:items-end justify-between">
                <div>
                    <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-song font-bold mb-2 scroll-reveal">珍贵古籍藏本</h1>
                    <p class="text-lightink max-w-2xl scroll-reveal">汇集历代经典古籍，传承中华文化精髓，让珍贵文献触手可及</p>
                </div>
                
                <!-- 搜索框 -->
                <div class="mt-6 md:mt-0 w-full md:w-auto scroll-reveal">
                    <div class="relative">
                        <input type="text" placeholder="搜索古籍名称、作者或内容..." 
                            class="w-full md:w-80 pl-10 pr-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-cinnabar/30 focus:border-cinnabar transition-all">
                        <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-lightink"></i>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 古籍分类 -->
        <section class="container mx-auto px-4 mb-12">
            <div class="bg-rice rounded-xl p-4 md:p-6 shadow-sm scroll-reveal">
                <h2 class="text-xl font-song font-bold mb-6">古籍分类</h2>
                <div class="flex flex-wrap gap-3">
                    <button class="bg-cinnabar text-rice px-5 py-2 rounded-full text-sm hover:bg-opacity-90 transition-all">
                        全部典籍
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        经部
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        史部
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        子部
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        集部
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        丛书
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        方志
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        医书
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        佛经
                    </button>
                    <button class="bg-paper text-ink px-5 py-2 rounded-full text-sm hover:bg-gray-200 transition-all">
                        道经
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 精选古籍 -->
        <section class="container mx-auto px-4 mb-16">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-8 text-center scroll-reveal">精选善本</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 古籍1 -->
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/24/600/800" alt="论语" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">经部</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">论语</h3>
                        <p class="text-sm text-lightink mb-3">孔子及其弟子 · 春秋时期</p>
                        <p class="text-ink/80 text-sm mb-4">儒家经典著作，记录孔子及其弟子言行，集中体现了孔子的政治主张、伦理思想、道德观念及教育原则。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">明刻本</span>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                阅读全文 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 古籍2 -->
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/20/600/800" alt="史记" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">史部</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">史记</h3>
                        <p class="text-sm text-lightink mb-3">司马迁 · 西汉</p>
                        <p class="text-ink/80 text-sm mb-4">中国第一部纪传体通史，记载了从上古传说中的黄帝时代到汉武帝太初四年间共3000多年的历史。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">宋刻本</span>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                阅读全文 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
                
                <!-- 古籍3 -->
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/25/600/800" alt="道德经" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                        <div class="absolute top-3 left-3 bg-cinnabar text-rice text-sm px-3 py-1 rounded-full">子部</div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-song font-bold mb-2">道德经</h3>
                        <p class="text-sm text-lightink mb-3">老子（李耳） · 春秋时期</p>
                        <p class="text-ink/80 text-sm mb-4">道家经典著作，以"道"为核心，阐述宇宙万物的演变，包含丰富的辩证法思想。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs bg-gray-100 px-2 py-1 rounded-full">元刻本</span>
                            <button class="text-cinnabar hover:text-cinnabar/80 transition-colors text-sm">
                                阅读全文 <i class="fa fa-angle-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                </a>
            </div>
        </section>
        
        <!-- 热门古籍 -->
        <section class="container mx-auto px-4 mb-16">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-8 text-center scroll-reveal">热门浏览</h2>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 热门古籍1 -->
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/22/600/400" alt="诗经" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-song font-bold mb-1">诗经</h3>
                        <p class="text-xs text-lightink">佚名 · 周代</p>
                    </div>
                </a>
                
                <!-- 热门古籍2-8 类似结构 -->
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/26/600/400" alt="楚辞" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-song font-bold mb-1">楚辞</h3>
                        <p class="text-xs text-lightink">屈原等 · 战国</p>
                    </div>
                </a>
                
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/28/600/400" alt="孙子兵法" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-song font-bold mb-1">孙子兵法</h3>
                        <p class="text-xs text-lightink">孙武 · 春秋</p>
                    </div>
                </a>
                
                <a href="book-detail.html" class="bg-rice rounded-xl overflow-hidden shadow-sm book-card-hover scroll-reveal">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/id/29/600/400" alt="本草纲目" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                    </div>
                    <div class="p-4">
                        <h3 class="text-lg font-song font-bold mb-1">本草纲目</h3>
                        <p class="text-xs text-lightink">李时珍 · 明代</p>
                    </div>
                </a>
            </div>
        </section>
        
        <!-- 古籍阅读工具 -->
        <section class="container mx-auto px-4 mb-16">
            <div class="bg-ink text-rice rounded-2xl overflow-hidden">
                <div class="grid grid-cols-1 lg:grid-cols-2">
                    <div class="p-8 md:p-12 flex flex-col justify-center">
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-song font-bold mb-4 scroll-reveal">专业古籍阅读工具</h2>
                        <p class="text-rice/70 mb-8 max-w-lg scroll-reveal">提供高清扫描、原文对照、注释解读、字词查询等功能，让古籍阅读不再困难，助您深入理解经典著作。</p>
                        <div class="flex flex-wrap gap-4 scroll-reveal">
                            <a href="#" class="inline-block bg-cinnabar text-rice px-6 py-3 rounded-full hover:bg-opacity-90 transition-all duration-300">
                                了解更多 <i class="fa fa-arrow-right ml-2"></i>
                            </a>
                            <a href="#" class="inline-block border-2 border-rice text-rice px-6 py-3 rounded-full hover:bg-rice hover:text-ink transition-all duration-300">
                                开始使用
                            </a>
                        </div>
                    </div>
                    <div class="relative h-64 lg:h-auto">
                        <img src="https://picsum.photos/id/175/800/600" alt="古籍阅读工具" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 加载更多 -->
        <div class="text-center mt-12 scroll-reveal">
            <button id="load-more" class="border-2 border-ink text-ink px-8 py-3 rounded-full hover:bg-ink hover:text-rice transition-all duration-300 font-song">
                加载更多古籍 <i class="fa fa-refresh ml-2"></i>
            </button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-ink text-rice py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-cinnabar flex items-center justify-center">
                            <span class="text-rice font-kai text-xl">典</span>
                        </div>
                        <span class="text-xl font-song font-bold">古籍在线</span>
                    </div>
                    <p class="text-rice/70 mb-6">传承中华文脉，让古籍焕发新生，为学者与爱好者提供专业的古籍资源平台</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-rice/70 hover:text-cinnabar transition-colors">首页</a></li>
                        <li><a href="poems.html" class="text-rice/70 hover:text-cinnabar transition-colors">诗境</a></li>
                        <li><a href="classics.html" class="text-rice/70 hover:text-cinnabar transition-colors">典籍</a></li>
                        <li><a href="interactive.html" class="text-rice/70 hover:text-cinnabar transition-colors">互动体验</a></li>
                        <li><a href="about.html" class="text-rice/70 hover:text-cinnabar transition-colors">关于我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">古籍资源</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">经部典籍</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">史部典籍</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">子部典籍</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">集部典籍</a></li>
                        <li><a href="#" class="text-rice/70 hover:text-cinnabar transition-colors">专题合集</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-song font-bold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-envelope-o mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">guji@guyunxinjing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">+86 123 4567 8910</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-cinnabar"></i>
                            <span class="text-rice/70">北京市海淀区古籍研究中心</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-rice/20 pt-8 text-center text-rice/50 text-sm">
                <p>© 2023 古籍在线 - 古韵新境 版权所有 | 古籍数字化保护项目</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        $('#menu-toggle').click(function() {
            $('#mobile-menu').toggleClass('hidden');
        });
        
        // 滚动显示动画
        function checkScroll() {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('active');
                }
            });
        }
        
        // 初始检查
        window.addEventListener('load', checkScroll);
        // 滚动时检查
        window.addEventListener('scroll', checkScroll);
        
        // 加载更多按钮
        $('#load-more').click(function() {
            // 模拟加载中状态
            $(this).html('<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...');
            
            // 2秒后恢复原状（实际应用中会异步加载数据）
            setTimeout(() => {
                $(this).html('加载更多古籍 <i class="fa fa-refresh ml-2"></i>');
                alert('已加载全部古籍');
            }, 2000);
        });
    </script>
</body>
</html>